<template>
  <Modal
    v-model="showModal"
    :title="titleText"
    :styles="styles"
    :z-index=1000
    @on-cancel="closeM"
  >
    <slot></slot>
    <div
      slot="footer"
      class="flex flex-x-end"
    >
      <Button
        v-if="buttonif"
        class="mr12"
        :quxiao="quxiao"
        @click="closeBt"
      >{{ cancelText }}
      </Button>
      <Button
        v-if="buttonif"
        type="primary"
        :loading="loading"
        @click="submitBt"
      >{{ okText }}
      </Button>
    </div>
  </Modal>
</template>

<script>
export default {
  name: "BaseModal",
  components: {},
  props: {
    buttonif: {
      type: Boolean,
      default: true
    },
    value: {
      type: Boolean,
      default: false
    },
    titleText: {
      type: String,
      default: "标题"
    },
    styles: {
      type: Object,
      default: () => {
        return {}
      }
    },
    loading: {
      type: Boolean,
      default: false
    },
    quxiao: {
      type: Boolean,
      default: false
    },
    cancelText: {
      type: String,
      default: "取消"
    },
    okText: {
      type: String,
      default: "确定"
    },
  },
  data () {
    return {};
  },
  computed: {
    showModal: {
      get: function () {
        return this.value;
      },
      set: function () {
        return this.value;
      }
    }
  },
  watch: {},
  created () {
  },
  mounted () {
  },
  methods: {
    // 弹窗关闭
    closeM () {
      this.$emit("closeM");
    },
    // 弹窗取消按钮关闭
    closeBt () {
      this.$emit("closeBt");
    },
    submitBt () {
      this.$emit("submitBt");
    }
  }
};
</script>
<style lang="less" scoped>
.demo-spin-icon-load {
  animation: ani-demo-spin 1s linear infinite;
}

@keyframes ani-demo-spin {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.demo-spin-col {
  height: 100px;
  position: relative;
  border: 1px solid #eee;
}

@deep: ~">>>";
@{deep} .ivu-modal-header {
  border-bottom: 1px solid #eeeeee;
  padding: 16px 20px;
}

@{deep} .ivu-modal-header-inner {
  font-size: 16px;
  font-weight: 500;
  color: #333333;
  line-height: 22px;
}

@{deep} .ivu-modal-close {
  top: 11px;
}

@{deep} .ivu-modal-footer {
  border-top: 1px solid #eeeeee;
  padding: 16px 20px;
}
</style>
